<template>
	<view>
		<view class="cart_con" v-if="list.length>0">
			<view class="con" v-for="item in list">
				<radio color="#F85F69" :checked="item.isChoice == true" @click="funChoice(0, item.cart_id)"></radio>
				<image :src="item.Product.pro_imgs"></image>
				<view class="imp">
					<text>{{item.Product.pro_title}}</text>
					<view class="tags">
						<label v-if="item.ProductTags.ptag_value1">{{item.ProductTags.ptag_value1}}</label>
					</view>
					<i>￥{{item.ProductTags.ptag_price.toFixed(2)}}</i>
				</view>
				<view class="num">
					<label @click="funChoiceNum(item.cart_id, item.cart_amount, 0)">-</label>
					<text>{{item.cart_amount}}</text>
					<label @click="funChoiceNum(item.cart_id, item.cart_amount, 1)">+</label>
				</view>
				<view class="close" @click="funRemove(item.cart_id)">×</view>
			</view>
		</view>
		<view class="cart_pop" v-if="list.length>0" :style="{bottom: bottom+'px'}">
			<view class="choice" @click="funChoice(1)">
				<radio color="#F85F69" :checked="isChoice == true"></radio>
				{{$t('select')}}
			</view>
			<view class="pay">
				<label>{{$t('total')}}：<text>￥{{price}}</text></label>
				<button @click="funPay">{{$t('settlement')}}</button>
			</view>
		</view>
		<div class="empty_con" v-if="isLoading==false&&list.length==0&&isLogin==false">
			<icon class="iconfont icon-gouwuche"></icon>
			<text>{{$t('no_cart')}}~~~</text>
		</div>
		<view class="product_con" v-if="isLoading==false&&list.length==0">
			<view class="con" v-for="item in list_pro" @click="funHref('/pages/product/detail?pro_id='+item.pro_id)">
				<image :src="item.pro_imgs" mode="widthFix"></image>
				<div class="imp">
					<text>{{item.pro_title}}</text>
					<view class="price">
						￥{{item.pro_price.toFixed(2)}}<i>￥{{item.pro_marketPrice.toFixed(2)}}</i></view>
				</div>
			</view>
		</view>
		<!--登录框-->
		<view class="login_alert" v-if="isLoading==false&&isLogin">
			<image src="/static/img/face.png" mode="widthFix"></image>
			<text>{{$t('login_alert')}}</text>
			<button @click="funHref('/pages/login/index')">{{$t('go_login')}}</button>
		</view>
		<!--刷新-->
		<view class='loadind_con' v-if="isLoading">
			<view class="loading">
				<view class="loading-bar"></view>
				<view class="loading-bar"></view>
				<view class="loading-bar"></view>
				<view class="loading-bar"></view>
			</view>
		</view>
		<!--客服按钮-->
		<view class="kefu_btn" @click="funHref('/pages/chatroom/chatroom')">
			<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons">&#xe626;</text>
			<text class="gui-footer-icon-buttons-text gui-block-text gui-icons">{{$t('give_service')}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bottom: 0,
				list_pro: [], //列表值
				list: [], //列表
				list_choice: [], //选择项
				isLoading: true, //是否正在加载
				isChoice: true, //是否全选
				price: 0, //价格
				isLogin: false,
			}
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.$t('cart')
			})
		},
		onLoad() {
			var _this = this;

			//#ifdef H5
			//_this.bottom = 50;
			//#endif

			//获取购物车
			_this.getData();

			//定义通讯方法
			uni.$on('load_getCart', function(data) {
				_this.getData();
			});
		},
		methods: {
			getData: function() { //获取内容
				var _this = this;
				_this.list = [];
				_this.isLoading = true;

				//获取购物车
				_this.fun_request("/Api/Cart/GetList", {}, function(res) {
					if (res.statusCode == 401) {
						//带登录
						_this.isLogin = true;
						
					} else {
						_this.isLogin = false;
						
						var _list = res.data;
						if (_list.length > 0) {
							_this.fun_map(_list, function(i, item) {
								item.Product.pro_imgs = item.Product.pro_imgs.split(',')[0];
								item.isChoice = true;
							});
							_this.list = _this.list.concat(_list);

							_this.funItems();
						} else {
							_this.funProduct(0);
						}
					}
					
					//加载完成
					_this.isLoading = false;
				});
			},
			funChoiceNum: function(cart_id, cart_amount, state) { //更改数量
				var _this = this;

				var cart_amount = cart_amount;
				if (state == 0) {
					if (cart_amount <= 1) {
						return;
					}
					cart_amount--;
				} else if (state == 1) {
					cart_amount++;
				}

				_this.isLoading = true;
				_this.fun_request("/Api/Cart/UpdateAmount", {
					cart_id: cart_id,
					cart_amount: cart_amount
				}, function(res) {
					if (res.code == 0) {
						var _list = _this.list;
						_this.fun_map(_list, function(i, item) {
							if (item.cart_id == cart_id) {
								item.cart_amount = cart_amount;
							}
						});
						_this.list = _list;

						_this.funItems();
						//加载完成
						_this.isLoading = false;
					}
				});
			},
			funChoice: function(state, cart_id) { //点击选择
				var _this = this;

				var _list = _this.list;
				if (state == 1) {
					_this.fun_map(_list, function(i, item) {
						item.isChoice = _this.isChoice ? false : true;
					});
					_this.isChoice = _this.isChoice ? false : true;
				} else {
					var _num = 0;
					_this.fun_map(_list, function(i, item) {
						if (item.cart_id == cart_id) {
							item.isChoice = item.isChoice ? false : true;
						}
						if (item.isChoice == true) _num++;
					});

					if (_num == 0) _this.isChoice = false;
					else if (_num == _list.length) _this.isChoice = true;
				}
				_this.list = _list;
				_this.funItems();
			},
			funRemove: function(cart_id) { //移除购物车
				var _this = this;

				_this.fun_showModal("确认删除吗？", function() {
					_this.isLoading = true;
					_this.fun_request("/Api/Cart/Remove", {
						cart_id: cart_id
					}, function(res) {
						if (res.code == 0) {
							_this.fun_map(_this.list, function(i, item) {
								if (item.cart_id == cart_id) {
									_this.list.splice(i, 1);
									//vue强制刷新的作用
									_this.$forceUpdate();
								}
							});

							_this.funItems();
							//加载完成
							_this.isLoading = false;
						}
					});
				});
			},
			funItems: function() { //获取选中项
				var _this = this;
				_this.list_choice = [];

				var _price = 0;
				var _list = _this.list;
				_this.fun_map(_list, function(i, item) {
					if (item.isChoice == true) {
						_price += item.Product.pro_price * item.cart_amount;
						item.ptag_value1 = item.ProductTags.ptag_value1;
						item.Product.pro_content = "";
						item.Product.pro_price = item.ProductTags.ptag_price;
						_this.list_choice.push(item);
					}
				});
				_this.price = _price.toFixed(2);
			},
			funPay: function() { //去结算
				var _this = this;
				if (_this.list_choice.length <= 0) {
					_this.fun_showToast("请选择要下单的商品");
					return;
				}
				_this.fun_navigateTo('/pages/pay/pay?list=' + JSON.stringify(_this.list_choice));
			},
			funProduct: function(state) { //获取产品
				var _this = this;
				_this.state = state;
				_this.list_pro = [];

				var _param = {
					type: "list",
					size: 10,
					total: 10
				};
				switch (state) {
					case 1: //首发新品
						_param.orderValue = "首发";
						_param.orderIndex = 0;
						break;
					case 2: //热销精品
						_param.orderIndex = 1;
						break;
					case 3: //关注热品
						_param.orderValue = "关注度";
						_param.orderIndex = 0;
						break;
				}

				_this.fun_request("/Api/Product/GetPageList", _param, function(res) {
					var _list = res.data;
					_this.fun_map(_list, function(i, item) {
						// var _pro_labels = item.pro_labels.substring(1, item.pro_labels.length);
						// _pro_labels = _pro_labels.substring(0, _pro_labels.length - 1);
						// item.pro_labels = _pro_labels.split(',');
					});
					_this.list_pro = _this.list_pro.concat(_list);
				});
			},
			funHref: function(url) { //跳转
				this.fun_navigateTo(url);
			},
		}
	}
</script>

<style>
	page {
		background-color: #F7F7F7;
	}

	.cart_pop {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		padding: 15rpx 3%;
		height: 100rpx;
		line-height: 70rpx;
		font-size: 30rpx;
	}

	.cart_pop .choice {
		float: left;
		line-height: 70rpx;
	}

	.cart_pop .choice radio {
		float: left;
		transform: scale(0.9);
		margin-top: -4rpx;
	}

	.cart_pop .pay {
		float: right;
		line-height: 70rpx;
	}

	.cart_pop .pay label {
		float: left;
		margin-right: 15rpx;
	}

	.cart_pop .pay label text {
		color: #F85F69;
	}

	.cart_pop .pay button {
		float: left;
		height: 70rpx;
		line-height: 70rpx;
		background-color: #F85F69;
		color: #fff;
		border-radius: 50rpx;
		font-size: 30rpx;
	}

	.empty_con {
		display: block;
		width: 94%;
		margin: 30rpx auto;
		background-color: #fff;
		padding: 80rpx 0;
		text-align: center;
		border-radius: 15rpx;
	}

	.empty_con icon {
		display: block;
		font-size: 150rpx;
		color: #F85F69;
	}

	.empty_con text {
		display: block;
		color: #999;
		font-size: 30rpx;
		margin-top: 30rpx;
	}
</style>
